<template>
	<view class="detail">
		<comHead :datas="datasObj"> <template #headerContent> </template>
		</comHead>
		<view class="content_box  pd-30">
			<view class="card pd-20">
				<view class="ft1">{{ "#" + tipData.name }}</view>
				<view class="card1 pd-20">

					<view class="ft">
						{{ !isShow ? tipData.des : (tipData.des?.substring(0, 100) + (tipData.des?.length > 100 ? '...'
							:
							'')) }}
					</view>
					<view class="flex mt-20">
						<view @click="goTip(tag.id)" class="ft c-bbq" v-for="tag in tipData.list" :key="tag.id">
							#{{ tag.name }}
						</view>
					</view>
				</view>
				<view class="card2 ft c-33 flex-center" @click="openL" v-if="isShow">
					<text>{{ "展开更多" }}</text>
					<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png"></image>
				</view>
				<view class="card2 ft c-33 flex-center" @click="closeL" v-else>
					<text>{{ "收起" }}</text>
					<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
				</view>
			</view>

			<view class="tabBox mt-60 flex-eve">
				<view class="tab flex-center ft" v-for="(item, index) in tabArray" :key="index"
					:class="{ active: currentTab === index }" @click="selectTab(index)">
					{{ item }}
				</view>
			</view>
			<view class="changeTab mt-24" v-if="currentTab === 0">

				<ComProjectList v-if="productList.length > 0" :dataList="productList">
				</ComProjectList>

			</view>
			<view class="changeTab mt-24" v-if="currentTab === 1">
				<view class="case ">
					<view class="caseItem pd-20" v-for="(item, index) in caseList" :key="item.id">
						<view class="ft mt-20 c-99">
							{{ "订购商品：" }}
						</view>
						<view class="flex-bwt pb-20" style="border-bottom: 2rpx #f1f1f1 solid">
							<text class="ft1 ft-lue" style="width: 360rpx;">{{ item.product_info?.name }}</text>
							<view class="detail flex-center ft" @click="goProjectDetail(item.product_id)">
								<text class="ft mr-8">{{ "查看商品" }}</text>
								<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
								</image>
							</view>
						</view>
						<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">订购时间：</view>
							<view class="ft c-33">{{ item.order_time }}</view>
						</view>
						<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">交付时间：</view>
							<view class="ft c-33">{{ item.deliver_time }}</view>
						</view>
						<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">办理结果：</view>
							<view class="ft c-33">{{ item.handle_result }}</view>
						</view>
						<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">办理周期：</view>
							<view class="ft c-33">{{ item.handle_cycle }}</view>
						</view>
						<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">客户条件：</view>
							<view class="ft c-33">
								{{ (item.customer_condition?.substring(0, 20) + (item.customer_condition?.length > 20 ?
									'...' : ''))
								}}
							</view>
						</view>
						<template v-if="item.images && item.images?.length > 0">
							<view class="ft mt-20 c-99">
								{{ "案例图片：" }}
							</view>
							<view class="imgGroup flex mt-20 "
								style="width: 650rpx;overflow: hidden;position: relative;">
								<view class="group" v-for="(img, index) in item.images" :key="index"
									@click="handlePreview(index, item.images)">
									<image class="wh-100" mode="aspectFill" :src="img"></image>
									<view class="img-count flex-center">{{ item.images?.length }}</view>
								</view>
							</view>
						</template>
						<view class="watch flex-center" @click="goDetail(item.id)">
							<text class="ft">查看详情</text>
							<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="changeTab mt-24" v-if="currentTab === 2">
				<view class="case">
					<view class="caseItem pd-20" v-for="(item, index) in evaluateList" :key="item.id">
						<view class="ft c-99">
							{{ "订购商品：" }}
						</view>
						<view class="flex-bwt mt-20 pb-20" style="border-bottom: 2rpx #f1f1f1 solid">
							<text class="ft1">{{ item.product_name }}</text>
							<view class="detail flex-center ft" @click="goProjectDetail(item.product_id)"
								v-if="item.product_id > 0">
								<text class="ft mr-8">{{ "查看商品" }}</text>
								<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
								</image>
							</view>
						</view>
						<view class="ft c-99 mt-20">
							{{ "订购评论：" }}
						</view>
						<view class="comments mt-20 flex">
							<view class="wh-68">
								<image class="avtor wh-100" :src="item.user_info.avatar"></image>
							</view>
							<view class="right ml-20">
								<view class="ft1 flex">{{ item.user_info.nickname }}
									<view class="nameplate ft ft-20 c-dbf text_center ml-8" v-if="item.user_info?.level_info?.id > 1">{{
										item.user_info?.level_info?.name
									}}</view>
								</view>
								<view class="ft mt-12">{{ item.ip_location + " | " + item.created_at }}</view>
							</view>
						</view>
						<view class="pd-20 mt-20 bd-r40"
							style="width: 644rpx;background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%,#ffffff 100%);">
							<view class="score flex">
								<!-- <up-rate active-color="#333333" v-model="item.star" readonly inactive-color="#D1D1D1"
									size="14" gutter="4"></up-rate> -->
								<comRate ref="comRate" v-if="item.star" :num="item.star" disabled>
								</comRate>
								<text class="ft ml-10 c-99" v-if="item.product_info">{{ "已购买" + item?.product_info?.name
									+
									"套餐"
								}}</text>
							</view>
							<view class="flex-start">
								<view class="tcard ft c-66 mt-20 mr-10 flex-center" v-for="tag in item.tags"
									:key="tag.id">
									{{ tag.name }}
								</view>
							</view>
							<view style="width: 610rpx;" class="ft ft-lue c-66 mt-20">{{ item.name }}</view>
						</view>
						<view class="watch flex-center" @click="goEvaluateDetail(item.id)">
							<text class="ft">查看更多</text>
							<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
							</image>
						</view>
					</view>

				</view>
			</view>
			<view class="changeTab mt-24" v-if="currentTab === 3">
				<view class="vedio flex-bwt-wrap ">
					<view class="vedioItem" v-for="item in videoList" :key="item.id"
						@click="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
						<image style="border-radius: 40rpx" class="bg wh-100" :src="item.cover" mode="aspectFill">
						</image>
						<image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
						<view class="card flex pd-12">
							<view class="avtor">
								<image class="wh-56 bd-r50c" :src="item.cover" mode="aspectFill"></image>
								<image class="huiyuan" src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
								</image>
							</view>
							<view class="desc ml-12 te-wid" v-if="item.product_info">
								<view class="ft1 te-1">{{ item.product_info.name }}</view>
								<view class="ft3"><span v-for="tag in item.product_info.tags.slice(0,2)" :key="tag.id">{{ ' #' +
									tag.name }}</span> </view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref, reactive
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad
} from "@dcloudio/uni-app";
import comHead from '@/components/comHead.vue';
import ComProjectList from "@/components/comProjectList.vue";
import comRate from '@/components/comRate.vue'

let datasObj = reactive({
	title: '标签搜索',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 88
})
//getProductTagDetail
const tabArray = ref(["推荐项目", "案例", "成交评价", "视频"]);
const currentTab = ref(0);
const selectTab = (index) => {
	currentTab.value = index;
};
const handlePreview = (index,imgList = []) => {
		uni.previewImage({
			current: index,
			urls: imgList
		});
	}
const goProjectDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/immigration/immigration?id=${id}`,
	});
};

const goDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/clinch/clinchDetail?id=${id}`,
	});
};

const goEvaluateDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/search/detail?id=${id}`,
	});
};

const isShow = ref(true)
const openL = () => {
	isShow.value = false;
}
const closeL = () => {
	isShow.value = true;
}

const tipData = ref({});
const getTagListData = (id) => {
	utils.request(api.getProductTagDetail, {
		id: id
	}, "get").then((res) => {
		tipData.value = res.data.info;
	});


};

const goTip = (tigId) => {
	uni.navigateTo({
		url: `/subpackage/clinch/tipSearch?tigId=${tigId}`,
	});
}


//项目
const productList = ref([]);
const getProductListData = (id) => {
	utils
		.request(
			api.getProductList, {
			page: 1,
			pageSize: 5,
			tag_id: id,
		},
			"post"
		)
		.then((res) => {
			productList.value = res.data.items;
		});
};

//案例
const caseList = ref([]);
const getCaseListData = (id) => {
	utils
		.request(
			api.getDealCaseList, {
			page: 1,
			pageSize: 5,
			tag_id: id,
		},
			"post"
		)
		.then((res) => {
			caseList.value = res.data.items;
		});
};

//评价

const evaluateList = ref([])

const getEvaluateListData = (id) => {
	utils
		.request(
			api.getEvaluateList, {
			page: 1,
			pageSize: 5,
			tag_id: id,

		},
			"get"
		)
		.then((res) => {
			evaluateList.value = res.data.items;
		});
}

//视频

const videoList = ref([])

const getVideoListData = (id) => {
	utils
		.request(
			api.getVideoList, {
			page: 1,
			pageSize: 5,
			tag_id: id,
			getReply: 0
		},
			"get"
		)
		.then((res) => {
			videoList.value = res.data.items;
		});
}

onLoad((parms) => {
	getTagListData(parms.tigId);
	getProductListData(parms.tigId);
	getCaseListData(parms.tigId);
	getEvaluateListData(parms.tigId);
	getVideoListData(parms.tigId);
})

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url
	})
}
</script>

<style lang="scss" scoped>
.detail {
	width: 100%;
	overflow-x: hidden;
}

.content_box {
	width: 100%;
	border-top: 2rpx solid #F1F1F1;

}

.card {
	width: 690rpx;
	// height: 418rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.card1 {
	width: 650rpx;
	// height: 234rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.card2 {
	width: 650rpx;
	height: 74rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
	border-radius: 0rpx 0rpx 40rpx 40rpx;
}

.tabBox {
	width: 560rpx;

	.tab {
		width: 122rpx;
		height: 72rpx;
		background: #f8f8f8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
	}
}

.cardList {
	.card {
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 690rpx;
		height: 408rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #f1f1f1;

		.left {
			width: 222rpx;
			height: 274rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

		.right {
			flex: 1;
			height: 274rpx;

			.top {
				.tip {
					width: 88rpx;
					height: 36rpx;
					background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}

			.domn {
				.price {
					width: 148rpx;
					height: 92rpx;
					background: linear-gradient(90deg,
							#fff5f3 0%,
							rgba(255, 245, 243, 0) 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.price2 {
					width: 148rpx;
					height: 92rpx;
					background: #fff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}

		.foot {
			width: 610rpx;
			height: 74rpx;
			background: linear-gradient(92deg,
					#f8f8f8 0%,
					rgba(248, 248, 248, 0) 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}
}

.vedio {
	.vedioItem {
		width: 334rpx;
		height: 614rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		//border: 1rpx solid red;
		margin-bottom: 16rpx;
		position: relative;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.play {
			position: absolute;
			top: 297rpx;
			left: 147rpx;
			z-index: 3;
		}

		.card {
			width: 314rpx;
			height: 82rpx;
			background: #ffffff;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			position: absolute;
			bottom: 10rpx;
			left: 10rpx;
			z-index: 10;


			.huiyuan {
				width: 22rpx;
				height: 20rpx;
				position: absolute;
				bottom: 10rpx;
				left: 44rpx;
				z-index: 12;
			}
		}
	}
}

.case {
	.caseItem {
		width: 690rpx;
		// height: 782rpx;
		margin-bottom: 20rpx;
		background: #f8f8f8;
		border-radius: 40rpx;
		border: 1rpx solid #f8f8f8;

		.detail {
			width: 170rpx;
			height: 54rpx;
			background: #ffffff;
			border-radius: 20rpx;
		}

		.group {
			width: 148rpx;
			height: 186rpx;
			border-radius: 40rpx;
			overflow: hidden;
			position: relative;
			flex-shrink: 0;
			margin-right: 20rpx;

			.play-icon {
				position: absolute;
				top: 12rpx;
				left: 12rpx;
				width: 36rpx;
				height: 36rpx;
				z-index: 1;
			}

			.img-count {
				display: none;
			}
		}

		.imgGroup {
			.group:nth-child(4) {
				.img-count {
					display: flex;
					width: 54rpx;
					height: 52rpx;
					// background: #F8F8F8;
					background: rgba(248, 248, 248, 0.3);
					border-radius: 26rpx;
					font-weight: 800;
					font-size: 22rpx;
					color: #333333;
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
					z-index: 2;
					backdrop-filter: blur(30rpx);
					-webkit-backdrop-filter: blur(30rpx);
				}
			}
		}

		.watch {
			width: 650rpx;
			height: 74rpx;
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0) 0%,
					#ffffff 100%);
			border-radius: 0rpx 0rpx 40rpx 40rpx;
		}

		.avtor {
			border-radius: 50%;
		}

		.nameplate {
			width: 88rpx;
			height: 36rpx;
			background: #333333;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 36rpx;
		}

		.tcard {
			padding-left: 20rpx;
			padding-right: 20rpx;
			height: 58rpx;
			background: #F1F1F1;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
		}
	}
}
</style>